<template>
  <div class="flex flex-col items-center justify-center h-screen">
    <div class="m-8">
      <p
        id="title"
        class="text-4xl hover:cursor-pointer MicrosoftYaHei"
      >
        Nuxt Pre Configured
      </p>
    </div>
    <div class="flex w-screen justify-center flex-wrap gap-14">
      <div style="width: 40vw">
        <UniTitleDiv
          title="Pre Configed Package"
          sub-title="预配置的包"
        >
          <div v-for="item in packages">{{ item }}</div>
        </UniTitleDiv>
      </div>
      <div style="width: 40vw">
        <UniTitleDiv
          title="Pre Configed State"
          sub-title="预配置的状态"
        >
          <div v-for="item in states">{{ item }}</div>
        </UniTitleDiv>
      </div>
      <div style="width: 40vw">
        <UniTitleDiv
          title="Pre Configed Utils"
          sub-title="预配置的工具函数"
        >
          <div v-for="item in utils">{{ item }}</div>
        </UniTitleDiv>
      </div>
      <div style="width: 40vw">
        <UniTitleDiv
          title="Pre Configed Code"
          sub-title="预配置的代码文件"
        >
          <div v-for="item in codes">{{ item }}</div>
        </UniTitleDiv>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const packages: string[] = [
  "@vueuse/core",
  "@element-plus/nuxt",
  " oh-vue-icons",
  "color-mode",
  "@nuxtjs/tailwindcss",
  "@types/node",
  "lodash-unified",
  "dayjs",
];

const states: string[] = ["useToken/getToken/setToken"];
const utils: string[] = ["apiFetch", "createTaskSequence", "deepEquals"];
const codes: string[] = ["/models/apis/api.ts", "/models/types/uniHttp.ts"];
</script>

<style lang="scss" scoped>
#title {
  transition: all 0.3s ease-in-out;
  &:hover {
    color: var(--color-success);
  }
}
</style>
